<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- icon图标 -->
    <link rel="icon" href="./static/image/kkb.png">
    <!-- swiper插件 -->
    <link rel="stylesheet" href="./static/swiper/swiper-bundle.min.css">
    <script src="./static/swiper/swiper-bundle.min.js"></script>
    <!-- 全局样式 -->
    <link rel="stylesheet" href="./static/style.css">
    <!-- 弹性布局 -->
    <script src="./static/flexable.js"></script>
</head>

<body>
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="v in videos" @click="doubleClick($event,v.id)">
                    <!-- 播放按钮 -->
                    <img v-show="!v.playing" class="play-btn" src="./static/image/play.png" alt="">

                    <!-- 头像 -->
                    <img :src="v.author" class="author" alt="" srcset="">
                    <!-- 获得赞的数量 -->
                    <div class="reward-num">
                        <img src="./static/image/active.png" alt="" srcset="">
                        <p>{{v.likenum}}</p>
                    </div>

                    <!-- 点赞出现的心 -->
                    <div class="hearts">
                        <img v-for="h in hearts" :key="h.id" :style="{left:h.x+'px',top:h.y+'px'}"
                            src="./static/image/active.png" alt="">
                    </div>

                    <video :id="'v-'+v.id" :src="v.videoUrl" :poster="v.poster" x5-video-player-fullscreen="true"
                        webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline></video>
                </div>

            </div>
        </div>

        <!-- 底部导航栏 -->
        <footer>
            <ul>
                <li>首页</li>
                <li>朋友</li>
                <li><img src="./static/image/add.png" alt=""></li>
                <li>消息</li>
                <li>我</li>
            </ul>
        </footer>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./static/data.js"></script>
    <script>
        const screenW = document.querySelector('.swiper-container').offsetLeft;
        const app = {
            data() {
                return {
                    videos: VIDEOS,
                    lastIndex: 0,
                    curIndext: 0,
                    timer:null,
                    lastclick:0,
                    hearts:[]
                }
            },
            mounted() {
                let _self = this;
                //1.swiper初始化
                var mySwiper = new Swiper('.swiper-container', {
                    direction: 'vertical', // 垂直切换选项
                    on: {
                        slideChangeTransitionEnd: function () {
                            _self.lastIndex = _self.curIndext;
                            _self.curIndext = this.activeIndex;
                            _self.switchVideo();
                        }
                    }
                })
            },
            methods: {
                //2.点击播放
                palyVideo( e,id) {
                    this.videos.forEach(v => {

                        if (v.id === id) {
                            if (v.playing) {
                                document.querySelector("#v-" + id).pause();
                                v.playing = false;
                            } else {
                                document.querySelector("#v-" + id).play();
                                v.playing = true;
                            }

                        }
                    });

                },

                //3.判断当前视频
                switchVideo() {
                    document.querySelector("#v-" + this.lastIndex).pause();
                    document.querySelector("#v-" + this.curIndext).play();
                    //3.1修改播放状态
                    this.videos.forEach(v => {
                        if (v.id === this.curIndext) {
                            v.playing = true;
                        }else{
                            v.playing = false;
                        }
                    });
                },
                //小心心函数
                likes(e,id){
                    console.log(e);
                    let x = e.clientX-screenW-40;
                    let y = e.clientY -40;
                    let heart = {
                        x,
                        y,
                        id:new Date().getTime()
                    }
                    this.hearts.push(heart);
                    if(this.hearts.length>5){
                        this.hearts.shift();
                    } 
                    this.videos.forEach(v => {
                        if (v.id === id) {
                            v.likenum++
                        }
                    })

                },
                // 4.判读点击还是双击，点击播放视频，双击出现小♥
                doubleClick(e,id){
                    // 单击
                    clearTimeout(this.timer);
                    this.timer = setTimeout(()=>{
                        this.palyVideo(e,id);
                        this.lastclick = 0;
                    },300)
                    // 双击
                    if(this.lastclick ===0){
                        this.lastclick = new Date().getTime();
                    }else{
                        let now = new Date().getTime();
                        let diff = now - this.lastclick;
                        if(diff<300){
                            this.likes(e,id);
                            clearTimeout(this.timer);
                            this.lastclick = 0;
                        }
                        
                    }

                }
                
            }
        }
        Vue.createApp(app).mount("#app")
    </script>
</body>

</html>